<template>
	<view id="viewComment">
		<view class="vote-item">
			<view class="vote-mr">
				<text class="middle" @click="viewDoctor(fileInfo.file_url)">
					<image class="word" src="/static/vote/word.png"></image>
				</text>
				<text class="right" @click="viewDoctor(fileInfo.file_url)">{{fileInfo.file_name}}</text>
			</view>
		</view>

		<view class="comment-wrap">
			<view class="comment-tit">
				评论 {{commentList.length}}
			</view>
			<view class="comment-cont" v-for="item in commentList" :key="item.id">
				<view class="comment-item">
					<view>
						<img class="comment-img" :src="item.headImg || 'https://clhy-img.oss-cn-beijing.aliyuncs.com/logo/avatar.jpg'">
					</view>
					<view class="comment-right">
						<view class="one">{{item.user_building_number}} {{item.user_name}}</view>
						<view class="two">{{item.begin_time}}</view>
						<view class="three">{{item.comment_reason}}</view>
					</view>
				</view>
			</view>
			<view v-if="commentList.length == 0">
				<view style="width: 232px;height: 242px;margin: 110px auto;margin-top: 50px;">
				  <image style="width: 100%;height: 100%;" src="../../../../static/image/9015d0e9f45344c4007d408cd271f6a.png" mode=""></image>
				</view>
				<view style="width: 62%;margin: -66px auto;text-align: center;color: #999;">暂无评论</view>
			</view>
		</view>

		<view class="foot-wrap">
			<view class="input-wrap">
				<input type="text" placeholder="写下你的评论..." v-model="inputVal" />
				<button class="send-btn" :style="!inputVal ? 'background:#d2d2d2' : ''" @click="send">发送</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileInfo: {
					id: null, //文件id
					voteId : null,//表决id
					file_name: null, //文件名称
					file_url: null, //文件路径
					fileType : null,//1、业主规约，2、议事规则，3、召开业主大会方案，4、认证委员方案，5、其他文件
				},
				user_id: uni.getStorageSync('rawData').userId,
				voteUserInfo: {}, //投票用户信息
				inputVal: '',
				commentList: []
			}
		},
		onLoad(option) {
			this.fileInfo.id = option.id;
			this.fileInfo.voteId = option.voteId;
			this.fileInfo.file_name = option.file_name;
			this.fileInfo.file_url = option.file_url;
			this.fileInfo.fileType = option.fileType;
			uni.setNavigationBarTitle({
				title: option.fileType == 1 ? '业主规约评论' 
					 : option.fileType == 2 ? '议事规则评论' 
				     : option.fileType == 3 ? '召开业主大会方案评论' 
				     : option.fileType == 4 ? '认证委员方案评论'
					 : '其他文件评论'
			});
		},
		mounted() {
			
			this.getCommentList();
			//获取登录人表决认证信息
			this.getVoteUserInfo();
		},
		methods: {
			getVoteUserInfo() {
				this.$requestYz.api.getVoteUserInfo({
					vote_id: this.fileInfo.voteId,
					user_id: this.user_id
				}).then(res => {
					this.voteUserInfo = res.data.data
				})
			},
			//获取评论记录
			getCommentList() {
				this.$requestYz.api.getCommentList({
					statute_id: this.fileInfo.id,
				}).then(res => {
					this.commentList = res.data.data.datalist;
				})
			},
			send() {
				if (!this.inputVal) {
					return false;
				}
				this.$requestYz.api.addCommentInfo({
					statute_id: this.fileInfo.id,
					user_id: this.user_id,
					user_name: this.voteUserInfo.full_name,
					user_building_number: this.voteUserInfo.building_number,
					comment_reason: this.inputVal
				}).then(res => {
					if(res.data.code == 0){
						uni.showToast({
							title: '评论成功！',
							icon: 'success'
						});
						this.getCommentList();
					}else{
						uni.showToast({
							title: '评论失败，请稍后再试！',
							icon: 'error'
						});
					}
					this.inputVal = "";
				})
				
			},
			//显示文档
			viewDoctor(url) {
				uni.downloadFile({
					url: url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							},
							fail() {
								console.log('打开文档失败');
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	$color:#999;
	$bold:bold;

	#viewComment {
		min-height: 100vh;
		height: auto;
		background-color: #f4f4f4;
		padding-top: 20rpx;

		.vote-item {
			width: 100%;
			min-height: 126rpx;
			background: #FFFFFF;
			padding: 20rpx 0;

			.vote-mr {
				padding: 30rpx 46rpx;
			}

			.vote-status {
				color: #427705;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
			}

			.vote-line {
				width: 345px;
				height: 1px;
				border: 1px solid #EEEEEE;
				margin: 30rpx auto;
			}

			.middle {
				margin: 30rpx 0;
			}

			.right {
				margin-left: 46rpx;
				color: #4C77F2;
				font-weight: $bold;
				text-decoration: underline;
			}

			.word {
				width: 40rpx;
				height: 46rpx;
				vertical-align: middle;
			}
		}

		.comment-wrap {
			min-height: 800rpx;
			height: auto;
			background: #fff;
			margin-top: 12rpx;
			padding: 30rpx;
			padding-bottom: 140rpx;

			.comment-tit {
				font-size: 28rpx;
				font-weight: bold;
			}

			.comment-cont {
				margin-top: 30rpx;
			}

			.comment-item {
				display: flex;
				align-items: start;

				.comment-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.comment-right {
					margin-left: 16rpx;
					border-bottom: 1px solid #eee;
					padding-bottom: 40rpx;
					width: 100%;
				}

				.one {
					font-size: 26rpx;
					font-weight: $bold;
				}

				.two {
					color: #999;
					margin-top: 10rpx;
				}

				.three {
					font-size: 30rpx;
					font-weight: bold;
					margin-top: 18rpx;
				}
			}
		}

		.foot-wrap {
			position: fixed;
			bottom: 0;
			background: #ffffff;
			width: 100%;
			min-height: 120rpx;
			padding: 30rpx;

			.input-wrap {
				display: flex;
				justify-content: center;

				& input {
					width: 460rpx;
					height: 68rpx;
					background: #F6F6F6;
					font-size: 28rpx;
					color: #333;
					border-radius: 60rpx;
					text-indent: 24rpx;
				}

				.send-btn {
					width: 160rpx;
					height: 60rpx;
					margin-top: 6rpx;
					line-height: 60rpx;
					border-radius: 36rpx;
					background: #427705;
					color: #fff;
				}
			}
		}
	}
</style>
